<template>
    <div class="container logo-search">
        <div class="row">
            <div class="col-8 logo">
                <h1 class="logo-h1">学习博客</h1>
            </div>
            <div class="col-4">
                <el-input placeholder="Please input" class="search" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
</script>

<style lang='scss' scoped>
.logo-search {
    margin: 25px;

    .logo {
        .logo-h1 {
            background-image: linear-gradient(#e66465, #9198e5);
            /*设置背景颜色*/
            -webkit-background-clip: text;
            -webkit-box-reflect: below 0 linear-gradient(transparent 0%, transparent 16%,
                    #000);
            color: transparent;
            font-size: 38px;
            font-weight: bold;
            font-style: italic;

        }
    }

    .search {
        margin-top: 14px;
        height: 50px;
        border-radius: 20px;
        background-color: #c9d5e0;
        box-shadow: 15px 15px 25px -10px rgba(0, 0, 0, 0.15),
            inset 15px 15px 10px rgba(255, 255, 255, 0.7),
            -15px -15px 35px rgba(255, 255, 255, 0.55),
            inset -1px -1px 10px rgba(0, 0, 0, 0.2);
    }
}
</style>